@import "../module/task2_framework";
@import "../module/color-framework";
@import "../module/variablae-value-framework";

body{
   background-color:#29bde0 ;
  //width: 750px;
  //margin: 0 auto;
  //min-width: 320px;
  //display: flex;
  //flex-direction: column;
  //height: 100%;
}

.header{
  @extend %allot;
  height: 3.1rem;
  padding: 0 $value-gap;

  .return{
    background-image: url("../images/return.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 28px;
    height: 30px;


  }

  .close{
    @extend .return;
    background-image:url("../images/close.png");
  }
}


.boxes{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-flow: wrap;
}

.boxes .profession-box {
  width: 25vw;
  height: 25vw;
  border: 2px solid #fff;
  margin: 3.5vw;
}
.boxes .profession-box .profession-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%; }
.boxes .profession-box .profession-flex .profession-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: #565656;
  background: #f5c97b;
  flex: auto;
  width: 100%; }
.boxes .profession-box .profession-flex .profession-num {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  color: #fff;
  height: 6vw;
  width: 100%;
  background: #83b09a; }



footer {
  display: flex;
  align-items: center;
  justify-content: center;
  button {
    width: 90%;
    height: 3.5rem;
    background-color: #fab344;
    font-size: 17px;
    color: white;

  }

}